<template>
    <div style="width: 100%;">
        <h1>补偿配置</h1>
        <div v-for="(form, formIndex) in formData" :key="formIndex">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item :title="'补偿配置-' + formIndex" :name=formIndex>
                    <el-form :model="form" style="width: 100%;">
                        <el-form-item label="Recharge Down">
                            <el-input-number v-model="form.RechargeDown"></el-input-number>
                        </el-form-item>
                        <el-form-item label="Recharge Up">
                            <el-input-number v-model="form.RechargeUp"></el-input-number>
                        </el-form-item>
                        <el-form-item label="库存3挡位是否生效">
                            <el-switch v-model="form.ThereLevel" ></el-switch>
                        </el-form-item>
                        <el-collapse v-model="activeNames" @change="handleChange">

                            <div v-for="(cfg, index) in form.Cfg" :key="index">
                                <el-collapse-item :title=index :name=index>
                                    <el-input type="number" v-model.number="cfg.RechargeRatio">
                                        <template #prepend>RechargeRatio</template>
                                    </el-input>
                                    <el-input type="number" v-model.number="cfg.ControlRate">
                                        <template #prepend>ControlRate</template>
                                    </el-input>

                                    <el-input type="number" v-model.number="cfg.ControlMinTimes">
                                        <template #prepend>ControlMinTimes</template>
                                    </el-input>
                                    <el-input type="number" v-model.number="cfg.ControlMaxTimes">
                                        <template #prepend>ControlMaxTimes</template>
                                    </el-input>
                                    <el-input type="number" v-model.number="cfg.ControlGiveMin">
                                        <template #prepend>ControlGiveMin</template>
                                    </el-input>
                                    <el-input type="number" v-model.number="cfg.ControlGiveMax">
                                        <template #prepend>ControlGiveMax</template>
                                    </el-input>
                                </el-collapse-item>

                            </div>
                        </el-collapse>
                    </el-form>
                </el-collapse-item>
            </el-collapse>

        </div>
        <el-form-item>
            <el-button :loading="btnLoading" type="primary" @click="submitForm">Submit</el-button>
        </el-form-item>
    </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import {
    fixCfg_get,
    fixCfg_save
} from "@/apis/admin";
import { tr } from "element-plus/es/locales.mjs";
const formData = ref([{
    RechargeDown: 0,
    RechargeUp: 1800,
    ThereLevel:1,
    Cfg: {
        Cfg1List: {
            RechargeRatio: 18,
            ControlRate: 80,
            ControlMinTimes: 0.5,
            ControlMaxTimes: 1,
            ControlGiveMin: 500,
            ControlGiveMax: 5000
        },
        Cfg2List: {
            RechargeRatio: 15,
            ControlRate: 50,
            ControlMinTimes: 0.5,
            ControlMaxTimes: 1,
            ControlGiveMin: 500,
            ControlGiveMax: 5000
        },
        Cfg3List: {
            RechargeRatio: 12,
            ControlRate: 30,
            ControlMinTimes: 0.5,
            ControlMaxTimes: 1,
            ControlGiveMin: 500,
            ControlGiveMax: 5000
        },
        Cfg4List: {
            RechargeRatio: 0.3,
            ControlRate: 5,
            ControlMinTimes: 2,
            ControlMaxTimes: 4,
            ControlGiveMin: 1000,
            ControlGiveMax: 3500
        },
        Cfg5List: {
            RechargeRatio: 0.2,
            ControlRate: 10,
            ControlMinTimes: 2,
            ControlMaxTimes: 4,
            ControlGiveMin: 1000,
            ControlGiveMax: 3500
        },
        Cfg6List: {
            RechargeRatio: 0.1,
            ControlRate: 10,
            ControlMinTimes: 2,
            ControlMaxTimes: 4,
            ControlGiveMin: 1000,
            ControlGiveMax: 3500
        }
    }
}, {
    RechargeDown: 0,
    RechargeUp: 1800,
    ThereLevel:1,
    Cfg: {
        Cfg1List: {
            RechargeRatio: 18,
            ControlRate: 80,
            ControlMinTimes: 0.5,
            ControlMaxTimes: 1,
            ControlGiveMin: 500,
            ControlGiveMax: 5000
        },
        Cfg2List: {
            RechargeRatio: 15,
            ControlRate: 50,
            ControlMinTimes: 0.5,
            ControlMaxTimes: 1,
            ControlGiveMin: 500,
            ControlGiveMax: 5000
        },
        Cfg3List: {
            RechargeRatio: 12,
            ControlRate: 30,
            ControlMinTimes: 0.5,
            ControlMaxTimes: 1,
            ControlGiveMin: 500,
            ControlGiveMax: 5000
        },
        Cfg4List: {
            RechargeRatio: 0.3,
            ControlRate: 5,
            ControlMinTimes: 2,
            ControlMaxTimes: 4,
            ControlGiveMin: 1000,
            ControlGiveMax: 3500
        },
        Cfg5List: {
            RechargeRatio: 0.2,
            ControlRate: 10,
            ControlMinTimes: 2,
            ControlMaxTimes: 4,
            ControlGiveMin: 1000,
            ControlGiveMax: 3500
        },
        Cfg6List: {
            RechargeRatio: 0.1,
            ControlRate: 10,
            ControlMinTimes: 2,
            ControlMaxTimes: 4,
            ControlGiveMin: 1000,
            ControlGiveMax: 3500
        }
    }
}]);
const btnLoading = ref(false);
fixCfg_get
    .post("", {})
    .then((res) => {
        console.log(res);
        for (let i = 0; i < res.data.cfg.length; i++) {
            res.data.cfg[i].ThereLevel = res.data.cfg[i].ThereLevel ? true : false;
        }
        formData.value = res.data.cfg;

    });
const submitForm = () => {
    btnLoading.value = true;
    console.log(formData.value);
    let obj = {};
    const updatedFormData = formData.value.map(item => {
        return {
            ...item,
            ThereLevel: Number(item.ThereLevel) || 0
        };
    });
    // 遍历对象全部数据，转为数字
    fixCfg_save.post("", {
        cfg: updatedFormData
    }).then((res) => {
        btnLoading.value = false;
        ElMessage.success("succress!");
        console.log(res);
    });
};
</script>

<style scoped>
/* Add any necessary styles here */
</style>